<template>
  <div class="nibp-container" v-loading="pageLoading">
    <el-table :data="state.tableData" size="small" height="500" @row-click="rowClick" row-key="time" :row-class-name="({row}: any) => row.is_active ? 'is-active' : ''" header-row-class-name="table-header">
      <el-table-column property="t" label="时间" :formatter="(row: any) => dayjs(row.t).format('YYYY-MM-DD HH:mm:ss')" width="150px"/>
      <el-table-column property="ns" label="收缩压"/>
      <el-table-column property="nd" label="舒张压" />
      <el-table-column property="nm" label="平均压" />
      <el-table-column property="result" label="结果" >
        <template #default="{ row }">
          <span :style="{color: res(row.ns)?.color, fontWeight: 600}">{{ res(row.ns)?.label }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="scatter-chart">
      <CommonChart 
        class="chart-container-content"
        ref="commonChartRef"
        height="500px"
        width="600px"
        :fullOptions="{
          options: option
        }"
        :loading="false"
        :id="`nibp-scatter-chart`"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed} from 'vue'
import CommonChart from '@/components/echarts/index.vue'
import { useScatterChart } from './scatter-chart'
import dayjs from 'dayjs'
const props = defineProps({
  config: {
    type: Object,
    default: () => {}
  },
  visible: {
    type: Boolean,
    default: false
  },
  deviceId: {
    type: String,
    default: ''
  }
}) as {
  config: any,
  visible: boolean,
  deviceId: string
}
let option = {
  title: {
    text: 'NIBP 数据列表',
    bottom: '0',
    left: 'center'
  },
  xAxis: {
    name: 'DIA',
    nameTextStyle: {
      fontWeight: 600,
      fontSize: '16px'
    },
    min: 40,
    max: 120
  },
  yAxis: {
    name: 'SYS',
    nameTextStyle: {
      fontWeight: 600,
      fontSize: '16px'
    },
    min: 80,
    max: 200
  },
  grid: {
    top: '40', right:'40'
  },
  series: [
    {
      symbolSize: 8,
      // data: chartData,
      type: 'scatter',
      emphasis: {
        label:{
          // show: true
        },
        itemStyle: {
          color: '#fff',
          borderColor: 'red',
          borderWidth: 2
        }
      },
      markArea: {
        emphasis: {
          disabled: true
        },
        data: [
          [{yAxis: '200', xAxis: '0',itemStyle: {color: 'rgb(191 73 81)'}},
            {yAxis:'0',xAxis: '120'}
          ],
          [{yAxis: '180', xAxis: '0',itemStyle: {color: 'rgb(216 153 151)'}},
            {yAxis:'0',xAxis: '110'}
          ],
          [
            {yAxis: '160', xAxis: '0',itemStyle: {color: 'rgb(232 196 153)'}},
            {yAxis:'0',xAxis: '100'}
          ],
          [
            {yAxis: '140', xAxis: '0',itemStyle: {color: 'rgb(160 203 154)'}},
            {yAxis:'0',xAxis: '90'}
          ],
          [
            {yAxis: '90', xAxis: '0',itemStyle: {color: 'rgb(160 196 228)'}},
            {yAxis:'0',xAxis: '60'}
          ],
        ]
      }
    },
  ]
};


const {
  commonChartRef,
  rowClick,
  state,
  pageLoading
} = useScatterChart(option, props, 'nd', 'ns')

const res = computed(() => {
  return (val: number) => {
    if(val >=90 && val <= 139) {
      return {
        label: '正常血压',
        color: '#A1CB9A'
      }
    } else if(val > 139 && val <= 159) {
      return {
        label: '轻度高血压',
        color: '#E8C498'
      }
    } else if(val > 159 && val <= 179) {
      return {
        label: '中度高血压',
        color: '#D89997'
      }
    } else if(val > 179) {
      return {
        label: '重度高血压',
        color: '#BF4951'
      }
    }
  }
})
</script>
<style lang="less" scoped>
.nibp-container {
  display: flex;
  // .scatter-chart {
  //   width: 50%;
  // }
  :deep(.is-active) {
    background-color: rgb(16 196 207);
    color: #fff;
  }
  :deep(.el-table__row.is-active):hover,
  :deep(.el-table--enable-row-hover .el-table__body tr.is-active:hover>td.el-table__cell) {
    background-color: rgb(16 196 207) !important;
  }
  :deep(.el-table th.el-table__cell) {
    background-color: rgb(25 144 255);
    color: #fff;
  }
}
</style>
